<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="120px" @keyup.enter.native="enterSearch">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input v-model="condition['search_LIKE_containerId']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型">
                        <auto-search-entrust v-model="condition['search_LIKE_containerType']"
                                             :name="condition['search_LIKE_containerType']"></auto-search-entrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸">
                        <auto-search-size v-model="condition['search_LIKE_containerSize']"
                                          :name="condition['search_LIKE_containerSize']"></auto-search-size>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口">
                        <select-port :name="portName" v-model="choicePortCode" :isMultiple = "true"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间起">
                        <el-date-picker v-model="condition['search_GTE_createDateTime']"
                                        :picker-options="startPickerOptions" type="date" placeholder="起始日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间止">
                        <el-date-picker v-model="condition['search_LTE_createDateTime']" @change="handleChangeEnd"
                                        :picker-options="endPickerOptions" type="date" placeholder="结束日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船代">
                        <auto-search-custom @selectName="v=>condition['search_LIKE_shipAgentName']=v"
                                            :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业类型">
                        <el-select v-model="condition['search_EQ_planType']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTsJobStatus" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内外贸">
                        <el-select v-model="condition['search_EQ_tradeType']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-button type="primary" class="ml-120" @click="loadData">查 询</el-button>
                    <el-button @click="handleSettle">重 置</el-button>
                    <el-button @click="handleExport">导出Excel</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="list" border stripe class="mt-10" >
            <el-table-column type="index" label="序号"  width="55"></el-table-column>
            <el-table-column prop="planType" label="作业类型"  min-width="120">
                <template slot-scope="scope">
                    {{ scope.row.planType | _filterTsJobStatus }}
                </template>
            </el-table-column>
            <el-table-column prop="containerId" label="箱号"   min-width="120">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="handleDetail(scope.row)">
                        {{ scope.row.containerId }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="100">
                <template slot-scope="scope">
                    {{scope.row.ef|_filterIfHeavyType}}
                </template>
            </el-table-column>
            <el-table-column prop="sealNo" label="铅封号" min-width="100"></el-table-column>
            <el-table-column prop="finishTime" label="完成日期"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.finishTime | filterDate }}
                </template>
            </el-table-column>
            <el-table-column prop="tallyTime" label="施封日期"  min-width="110">
                <template slot-scope="scope">
                    {{scope.row.tallyTime | filterDate}}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="120"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代" min-width="120"></el-table-column>
            <el-table-column prop="accountUnit" label="结算单位" min-width="120"></el-table-column>
            <el-table-column prop="finishUser" label="完成人" min-width="120"></el-table-column>
            <el-table-column prop="finishTime" label="完成时间"  min-width="160"></el-table-column>
        </el-table>
        <el-row class="bottom mt-10" type="flex" justify="space-between" v-show="total>0">
            <div class="oper">

            </div>
            <el-pagination class="page" @size-change="size=>pageInfo.iDisplayLength=size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :current-page.sync="pageInfo.pageStart" :page-sizes="pageInfo.pageArr"
                           :page-size="pageInfo.iDisplayLength" :total="total">
            </el-pagination>
        </el-row>
        <special-form v-if="dialogForm" ref="specialForm" @load="loadData"></special-form>
        <special-detail-form v-if="dialogForm" ref="specialDetailForm"></special-detail-form>
    </div>
</template>

<script>
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import autoSearchPortStation from '@/components/autocomplete/autoSearchPortStation'
    import { getPlanList, getPlanId, deletePlanList } from '@/api/planList/planList.js'
    import specialForm from '@/views/business/shipPlan/specialForm'
    import specialDetailForm from '@/views/business/shipPlan/specialDetailForm'
    import titlePoint from '@/views/business/common/title-point'
    import selectPort from '@/components/select/selectPort'
    import { getLocalTime } from "@/utils/dateFormat";
    import { newExportExcel } from "@/utils/newExport";
    import { tradeType, trueOrFalse, importAndExportType, tsJobStatus, portCode, ifHeavyType } from "@/assets/dict";

    export default {
        name: "特殊理箱",
        components: {
            autoSearchPortStation,
            specialForm,
            specialDetailForm,
            autoSearchEntrust,
            autoSearchSize,
            autoSearchCustom,
            titlePoint,
            selectPort
        },
        data() {
            return {
                condition: {
                    search_GTE_createDateTime : getLocalTime(new Date().getTime() - (7*24 * 3600 * 1000), 'YYYY-MM-DD hh:mm:ss'),
                    search_LTE_createDateTime : getLocalTime(new Date(), "YYYY-MM-DD hh:mm:ss"),
                },
                cForm: {},
                list: [],
                select: [],
                total: 0,
                pageInfo: this.$defalutPage(),
                listLoading: false,
                dialogForm: false,
                cancelForm: false,
                specialSettleForm: false,
                totleNum: 0,
                settlement: 0,
                noSettlement: 0,
                inNum: 0,
                outNum: 0,
                created: true,
                noJobteu: 0,
                jobTeu: 0,
                portName:'',
                settleJob: 0,
                nosettleJob: 0,
                importJob: 0,
                exportJob: 0,
                choicePortCode : []
            }
        },
        mounted() {
            this.loadData()
        },
        activated() {
            if (!this.created) {
                this.loadData()
            }
        },
        methods: {
            loadData() {
                this.listLoading = true
                this.condition.search_EQ_portCode = this.arrayToString(this.choicePortCode)
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayStart = this.pageInfo.pageStart - 1
                params.iDisplayLength = this.pageInfo.iDisplayLength
                params.sortType = '-createDateTime'
                params.search_EQ_type = 'TS'
                getPlanList(params).then(res => {
                    this.created = false
                    const data = res.data
                    this.noJobteu = data.noJobteu
                    this.jobTeu = data.jobTeu
                    this.total = data.data.iTotalRecords
                    this.listLoading = false
                    this.list = data.data.aaData
                    this.totleNum = data.totleNum
                    this.settleJob = data.settleJob
                    this.nosettleJob = data.nosettleJob
                    this.importJob = data.importJob
                    this.exportJob = data.exportJob
                    this.settlement = 0
                    this.noSettlement = 0
                    this.inNum = 0
                    this.outNum = 0
                    this.list.forEach(f => {
                        if (f.imOrEx === 'I') {
                            this.inNum = this.inNum + 1
                        }
                        if (f.imOrEx === 'O') {
                            this.outNum = this.outNum + 1
                        }
                        if (f.isAccount === true) {
                            this.settlement = this.settlement + 1
                        }
                        if (f.isAccount === false) {
                            this.noSettlement = this.noSettlement + 1
                        }
                    })
                })
            },
            arrayToString:function(arr){
                let value = ""
                if (arr != null && arr != "" && arr.length > 0){
                    arr.forEach((column, index) => {
                        value = value + "," + column
                    })
                    value = value.substring(1)
                }
                return value
            },
            enterSearch() {
                this.loadData()
            },
            handleSettle() {
                this.condition={
                    search_GTE_createDateTime : getLocalTime(new Date().getTime() - (7*24 * 3600 * 1000), 'YYYY-MM-DD hh:mm:ss'),
                    search_LTE_createDateTime : getLocalTime(new Date(), "YYYY-MM-DD hh:mm:ss"),
                }
                this.portName = ""
                this.choicePortCode = []
            },
            handleDetail(item) {
                getPlanId(item.planId).then(res => {
                    this.dialogForm = true
                    this.$nextTick(() => {
                        this.$refs.specialDetailForm.dialogForm = true
                        let form = JSON.parse(JSON.stringify(res.data))
                        delete form.records
                        this.$refs.specialDetailForm.form = form
                        this.$refs.specialDetailForm.table = res.data.records
                    })
                })
            },
            handleChangeEnd(val) {
                let setVal = val;
                if (val) {
                    setVal = val.split(" ")[0] + " 23:59:59";
                }
                this.condition["search_LTE_createDateTime"] = setVal;
            },
            handleExport() {
                let map = new Map();
                map.set("planType", "作业类型")
                map.set("containerId", "箱号")
                map.set("containerType", "箱型")
                map.set("containerSize", "尺寸")
                map.set("tradeType", "内外贸")
                map.set("ef", "空重")
                map.set("sealNo", "铅封号")
                map.set("finishTime", "完成日期")
                map.set("tallyTime", "施封日期")
                map.set("remark", "备注")
                map.set("shipAgentName", "船代")
                map.set("accountUnit", "结算单位")
                map.set("finishUser", "完成人")
                map.set("finishTime", "完成时间")
                this.condition.search_EQ_portCode = this.arrayToString(this.choicePortCode)
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayStart = this.pageInfo.pageStart - 1
                params.iDisplayLength = 9999
                params.sortType = '-createDateTime'
                params.search_EQ_type = 'TS'
                getPlanList(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === "tradeType") {
                                record[key] = tradeType.get(record[key]);
                            }
                            if (key === "ef") {
                                record[key] = ifHeavyType.get(record[key]);
                            }
                            if (key === "planType") {
                                record[key] = tsJobStatus.get(record[key]);
                            }
                            if (key === 'finishTime') {
                                record[key] = record[key] ? record[key].substr(0, 10) : '-'
                            }
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("特殊理箱", exportRecords);
                })
            }
        },
        watch: {
            pageInfo: {
                deep: true,
                handler: function () {
                    this.loadData()
                }
            }
        },
        computed: {
            startPickerOptions() {
                let endDate = this.condition["search_LTE_createDateTime"];
                return {
                    disabledDate(time) {
                        if (endDate) {
                            return time.getTime() > new Date(endDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
            endPickerOptions() {
                let startDate = this.condition["search_GTE_createDateTime"];
                return {
                    disabledDate(time) {
                        if (startDate) {
                            return time.getTime() < new Date(startDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : '-'
            }
        }
    }
</script>

<style scoped>
    .bottom {
        display: flex;
        padding: 0 10px;
        justify-content: space-between;
        align-items: center;
    }

    .operbar {
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
    }
</style>
